<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row :gutter="24">
          <el-col :span="18"
            ><div class="grid-content bg-purple">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="目录名称">
                  <el-input v-model="formInline.user"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formInline.region" placeholder="请选择">
                    <el-option label="启用" value="shanghai"></el-option>
                    <el-option label="禁用" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="clear" class="clear"
                    >清除</el-button
                  >
                  <el-button type="primary" @click="search" class="search"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple col-6">
              <el-button type="primary" icon="el-icon-edit" class="added"
                >新增目录</el-button
              >
            </div></el-col
          >
        </el-row>
        <el-alert
          title="数据一共 12 条"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="序号"> </el-table-column>
          <el-table-column prop="name" label="所属科目" width="190">
          </el-table-column>
          <el-table-column prop="name" label="目录名称" width="190">
          </el-table-column>
          <el-table-column prop="name" label="创建者" width="190">
          </el-table-column>
          <el-table-column prop="name" label="创建日期" width="190">
          </el-table-column>
          <el-table-column prop="name" label="面试题数量" width="190">
          </el-table-column>
          <el-table-column prop="name" label="状态" width="190">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="190">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            :total="400"
            layout=" prev, pager, next,sizes, jumper"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from "@/api/hmmm/companys";
import { list as getQuestion } from "@/api/hmmm/questions";

export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      },
    };
  },
  created() {
    getCompanys();
    getQuestion();
  },
  methods: {
    clear() {
      console.log("clear!");
    },
    search() {
      console.log("search!");
    },

    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
};
</script>

<style  scoped>
.el-button--primary.clear {
  background-color: #fff;
  color: #606266;
}
.el-button--primary.added {
  color: #fff;
  background-color: #67c23a;
}
.col-6 {
  text-align: right;
}
.el-alert {
  margin-bottom: 12px;
}
.el-pagination{
  margin-top: 20px;
  text-align: right;
}
</style>
